<template>
  <ContentWrap>
    <CardTitle title="DocAlert 文档提醒组件" />
    
    <div class="demo-section">
      <h3>基础使用</h3>
      <p>DocAlert 是一个用于显示文档链接的提醒组件，通常用于在开发环境中显示相关文档地址，方便开发者快速访问。</p>
      <code class="code-block mt-10px">
        &lt;DocAlert 
          title="API文档"
          url="https://api.example.com/docs"
        /&gt;
      </code>
    </div>

    <CardTitle title="演示示例" />

    <!-- 基础使用示例 -->
    <div class="demo-section">
      <h4>1. 基础文档提醒</h4>
      <p>最简单的文档提醒用法，显示标题和链接地址</p>
      <DocAlert
        title="Vue 3 官方文档"
        url="https://vuejs.org/"
      />
      <div class="code-example">
        <p><strong>代码示例：</strong></p>
        <code>
          &lt;DocAlert<br/>
          &nbsp;&nbsp;title="Vue 3 官方文档"<br/>
          &nbsp;&nbsp;url="https://vuejs.org/"<br/>
          /&gt;
        </code>
      </div>
    </div>

    <!-- API 文档示例 -->
    <div class="demo-section">
      <h4>2. API 文档提醒</h4>
      <p>用于API接口文档的提醒</p>
      <DocAlert
        title="REST API 接口文档"
        url="https://api.github.com"
      />
      <div class="code-example">
        <p><strong>代码示例：</strong></p>
        <code>
          &lt;DocAlert<br/>
          &nbsp;&nbsp;title="REST API 接口文档"<br/>
          &nbsp;&nbsp;url="https://api.github.com"<br/>
          /&gt;
        </code>
      </div>
    </div>

    <!-- 组件库文档示例 -->
    <div class="demo-section">
      <h4>3. 组件库文档提醒</h4>
      <p>用于组件库使用文档的提醒</p>
      <DocAlert
        title="Element Plus 组件库"
        url="https://element-plus.org/"
      />
      <div class="code-example">
        <p><strong>代码示例：</strong></p>
        <code>
          &lt;DocAlert<br/>
          &nbsp;&nbsp;title="Element Plus 组件库"<br/>
          &nbsp;&nbsp;url="https://element-plus.org/"<br/>
          /&gt;
        </code>
      </div>
    </div>

    <!-- 开发工具文档示例 -->
    <div class="demo-section">
      <h4>4. 开发工具文档提醒</h4>
      <p>用于开发工具相关文档的提醒</p>
      <DocAlert
        title="Vite 构建工具"
        url="https://vitejs.dev/"
      />
      <div class="code-example">
        <p><strong>代码示例：</strong></p>
        <code>
          &lt;DocAlert<br/>
          &nbsp;&nbsp;title="Vite 构建工具"<br/>
          &nbsp;&nbsp;url="https://vitejs.dev/"<br/>
          /&gt;
        </code>
      </div>
    </div>

    <!-- 多个文档示例 -->
    <div class="demo-section">
      <h4>5. 多个文档提醒</h4>
      <p>在一个页面中显示多个相关文档链接</p>
      <div class="multiple-docs">
        <DocAlert
          title="TypeScript 官方文档"
          url="https://www.typescriptlang.org/"
        />
        <DocAlert
          title="ESLint 代码规范"
          url="https://eslint.org/"
        />
        <DocAlert
          title="Prettier 代码格式化"
          url="https://prettier.io/"
        />
      </div>
      <div class="code-example">
        <p><strong>代码示例：</strong></p>
        <code>
          &lt;DocAlert title="TypeScript 官方文档" url="https://www.typescriptlang.org/" /&gt;<br/>
          &lt;DocAlert title="ESLint 代码规范" url="https://eslint.org/" /&gt;<br/>
          &lt;DocAlert title="Prettier 代码格式化" url="https://prettier.io/" /&gt;
        </code>
      </div>
    </div>

    <!-- 环境变量控制示例 -->
    <div class="demo-section">
      <h4>6. 环境变量控制显示</h4>
      <p>DocAlert 组件的显示受环境变量 <code>VITE_APP_TENANT_ENABLE</code> 控制</p>
      <div class="env-info">
        <el-alert type="info" show-icon :closable="false">
          <template #title>
            <div>
              <p><strong>当前环境变量状态：</strong></p>
              <p>VITE_APP_TENANT_ENABLE = {{ envStatus }}</p>
              <p>DocAlert 显示状态：{{ envStatus === 'true' ? '显示' : '隐藏' }}</p>
            </div>
          </template>
        </el-alert>
      </div>
      <div class="code-example">
        <p><strong>环境变量配置：</strong></p>
        <code>
          # .env 文件中配置<br/>
          VITE_APP_TENANT_ENABLE=true  # 显示 DocAlert<br/>
          VITE_APP_TENANT_ENABLE=false # 隐藏 DocAlert
        </code>
      </div>
    </div>

    <CardTitle title="属性说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>属性名</th>
          <th>类型</th>
          <th>默认值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>title</td>
          <td>String</td>
          <td>-</td>
          <td>文档标题</td>
        </tr>
        <tr>
          <td>url</td>
          <td>String</td>
          <td>-</td>
          <td>文档链接地址</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="环境变量配置" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>环境变量</th>
          <th>类型</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>VITE_APP_TENANT_ENABLE</td>
          <td>String</td>
          <td>控制 DocAlert 组件是否显示，值为 'true' 时显示</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="样式说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>CSS 类名</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>.el-alert--success.is-light</td>
          <td>成功类型的浅色警告框样式，包含底边距、鼠标指针和绿色边框</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="使用场景" />
    <div class="use-cases">
      <div class="use-case-card">
        <h5>📚 开发文档提醒</h5>
        <p>在开发环境中显示相关技术文档链接，方便开发者快速查阅</p>
      </div>
      <div class="use-case-card">
        <h5>🔗 API 接口文档</h5>
        <p>在页面中提供 API 接口文档的快速访问入口</p>
      </div>
      <div class="use-case-card">
        <h5>📖 组件使用说明</h5>
        <p>为特定组件或功能模块提供详细的使用文档链接</p>
      </div>
      <div class="use-case-card">
        <h5>🛠️ 工具配置文档</h5>
        <p>提供开发工具、构建配置等相关文档的便捷访问</p>
      </div>
      <div class="use-case-card">
        <h5>📋 规范指南</h5>
        <p>链接到代码规范、设计规范等团队标准文档</p>
      </div>
      <div class="use-case-card">
        <h5>🔧 调试帮助</h5>
        <p>在开发调试时提供相关帮助文档的快速链接</p>
      </div>
    </div>

    <CardTitle title="注意事项" />
    <div class="notes">
      <el-alert type="warning" show-icon :closable="false">
        <template #title>
          <div>
            <p><strong>重要提示：</strong></p>
            <ul>
              <li>DocAlert 组件只在环境变量 <code>VITE_APP_TENANT_ENABLE</code> 为 'true' 时显示</li>
              <li>点击组件会在新窗口中打开指定的 URL 链接</li>
              <li>建议只在开发环境中使用，生产环境可通过环境变量控制隐藏</li>
              <li>URL 地址需要包含完整的协议（如 https://）</li>
            </ul>
          </div>
        </template>
      </el-alert>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 获取当前环境变量状态
const envStatus = computed(() => {
  return (import.meta as any).env.VITE_APP_TENANT_ENABLE || 'false'
})
</script>

<style scoped>
.demo-section {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

.demo-section h4 {
  margin-bottom: 15px;
  color: #303133;
  font-weight: 600;
}

.demo-section p {
  margin-bottom: 15px;
  color: #606266;
  line-height: 1.5;
}

.code-block {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
}

.code-example {
  margin-top: 15px;
  padding: 15px;
  background: #fafbfc;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.code-example code {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  display: block;
  white-space: pre-line;
}

.multiple-docs {
  margin: 15px 0;
}

.env-info {
  margin: 15px 0;
}

.properties-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.properties-table th,
.properties-table td {
  border: 1px solid #e4e7ed;
  padding: 12px;
  text-align: left;
}

.properties-table th {
  background: #f5f7fa;
  font-weight: 600;
  color: #303133;
}

.properties-table td {
  color: #606266;
}

.properties-table code {
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.use-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.use-case-card {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #67c23a;
}

.use-case-card h5 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 16px;
}

.use-case-card p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.notes {
  margin: 20px 0;
}

.notes ul {
  margin: 10px 0;
  padding-left: 20px;
}

.notes li {
  margin-bottom: 8px;
  color: #606266;
  line-height: 1.5;
}
</style> 